<template>
	<view class="view-hot-bg">

		<view class="view-hot-top">
			<image style="width: 44rpx; height: 48rpx; margin: 0 20rpx 0 32rpx;"
				src="https://mcdn.chatgk.com/xcx/static/images/scoreline/hotimage.png" mode="aspectFit"></image>
			<text style="font-size: 32rpx; color: #333333; font-weight: bold;">热门关注</text>
		</view>

		<scroll-view class="scroll-hot" show-scrollbar="false" :scroll-x="true">
			<view style="display: flex;flex-wrap: nowrap;">

				<view style="display:flex;" v-for="(items,index) in list" :key="index">
					<view class="view-line" v-if="index > 0"></view>
					<view class="" style="width: 480rpx;">
						<view v-for="(item,index) in items" :key="index"
							style="		display: flex;flex-direction: row; align-items: center; height: 92rpx; max-width: 436rpx;"
							@tap="onClickHotNews(item)">
							<!-- <view style="width: 44rpx; height: 44rpx;" v-html="item.icon"></view> -->
							<image style="width: 44rpx; height: 44rpx;" :src="'http://mcdn.chatgk.com' + item.icon"
								mode="aspectFit"></image>
							<text class="text-hot-title">{{item.title}}</text>
							<image style="width: 12rpx; height: 24rpx;"
								src="https://mcdn.chatgk.com/xcx/static/images/ping/ping-mian-more-img.png"
								mode="aspectFit"></image>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			hotNews: {
				type: Object,
				default: []
			}
		},
		data() {
			return {
				list: []
			}
		},
		watch: {
			hotNews: {
				handler(newVal) {
					this.list = []
					let arr = []
					for (let i = 0; i < this.hotNews.length; i++) {
						const item = this.hotNews[i]
						arr.push(item)

						if ((i + 1) % 4 == 0) {
							this.list.push(arr)
							arr = []
						}
					}

					if (arr.length) {
						this.list.push(arr)
					}
				}
			}
		},
		mounted() {

		},
		methods: {
			// 点击最新新闻
			onClickHotNews(item) {
				uni.navigateTo({
					url: '/subpackages/subpackage1/pages/searchcollege/collegeDetails/news-details?data=' +
						encodeURIComponent(JSON
							.stringify(item))
				})

				// uni.$emit('setNewsDetailsContent', {data:item})
			},
		}
	}
</script>

<style>
	.view-hot-bg {
		display: flex;
		flex-direction: column;
		margin: 0 32rpx 52rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.view-hot-top {

		width: 686rpx;
		/* margin-top: -104rpx; */
		height: 104rpx;
		background-image: url("https://mcdn.chatgk.com/xcx/static/images/home/home_hot_bg.png");
		background-size: cover;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.scroll-hot {
		width: 686rpx;

		background-color: #fff;
		padding: 12rpx 28rpx 22rpx;
	}

	.view-line {
		width: 4rpx;
		background-color: #F8F8F8;
		border-radius: 2rpx;
		margin: 24rpx 50rpx;
	}

	.text-hot-title {
		width: 400rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
		margin: 0 30rpx 0 16rpx;
		overflow: hidden;
		white-space: nowrap;
		lines: 1;
		text-overflow: ellipsis;
	}
</style>